<template>
  <div class="DocBox">
    <TableList2 :list="doc.list" :column="doc.column">
      <div slot="column2" class="noBlueBg">
        <el-table-column
          prop="sectionName"
          width="230"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" plain @click="editDoc(scope.row)">编辑</el-button>
            <el-button type="warning" size="mini" plain @click="delDoc(scope.row.id)">删除</el-button>
            <el-button size="mini" plain @click="downLoad(scope.row.fileUrl,scope.row.fileName)">下载</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="archivesCode"
          align="center"
          label="档案编号">
        </el-table-column>
        <el-table-column
          prop="archivesName"
          align="center"
          label="档案标题">
        </el-table-column>
        <el-table-column
          prop="catalogNo"
          align="center"
          label="目录号">
        </el-table-column>
        <el-table-column
          prop="documentNo"
          align="center"
          label="文号">
        </el-table-column>
        <el-table-column
          prop="fileNo"
          align="center"
          label="案卷号">
        </el-table-column>
        <el-table-column
          prop="pageSize"
          align="center"
          label="页量">
        </el-table-column>
        <el-table-column
          prop="year"
          align="center"
          label="年度">
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="uploaded"-->
        <!--          align="center"-->
        <!--          label="上传者">-->
        <!--        </el-table-column>-->
      </div>
      <div slot="option" class="noBlueBg">
        <el-form :inline="true" :model="doc.options" class="bottom-border" ref="docOptionForm">
          <el-form-item label="档案编号" prop="archivesCode">
            <el-input v-model="doc.options.archivesCode" clearable placeholder="请输入档案编号" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="档案标题" prop="archivesName">
            <el-input v-model="doc.options.archivesName" clearable placeholder="请输入档案标题" size="mini"></el-input>
          </el-form-item>
          <!--          <el-form-item label="上传人" prop="uploaded">-->
          <!--            <el-input v-model="doc.options.uploaded" clearable placeholder="请输入上传人" size="mini"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" size="mini" @click="loadDocList"><span class="el-icon el-icon-search"></span>
              查询
            </el-button>
            <el-button size="mini" @click="resetOption('docOptionForm')"><span
              class="el-icon el-icon-refresh-left"></span> 重置
            </el-button>
          </el-form-item>
          <el-form-item class="floatRight">
            <el-button size="mini" type="success" @click="addDoc"><span class="el-icon el-icon-plus"></span>新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="page noBlueBg" slot="bottom">
        <el-pagination
          @size-change="changeDocSize"
          @current-change="changeDocPage"
          :page-sizes="[20, 50, 100, 200]"
          :current-page="doc.page"
          :page-size="doc.limit"
          layout="sizes,total,prev, pager, next, jumper"
          :total="doc.totals">
        </el-pagination>
      </div>
    </TableList2>
    <Dialog :cfg="dialogCfg" ref="dialog">
      <el-form :model="editData" label-width="80px" :inline="true" :rules="rules" ref="addForm">
        <el-form-item label="档案编号" prop="archivesCode">
          <el-input v-model="editData.archivesCode" clearable placeholder="请输入档案编号" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="档案标题" prop="archivesName">
          <el-input v-model="editData.archivesName" clearable placeholder="请输入档案标题" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="目录号" prop="catalogNo">
          <el-input v-model="editData.catalogNo" clearable placeholder="请输入目录号" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="文号" prop="documentNo">
          <el-input v-model="editData.documentNo" clearable placeholder="请输入文号" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="案卷号" prop="fileNo">
          <el-input v-model="editData.fileNo" clearable placeholder="请输入案卷号" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="页量" prop="pageSize">
          <el-input v-model="editData.pageSize" type="number" clearable placeholder="请输入页量" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="年度" prop="year">
          <el-input v-model="editData.year" clearable placeholder="请输入年度" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="文件" prop="fileUrl">
          {{editData.fileUrl?editData.fileUrl.substring(editData.fileUrl.lastIndexOf("/")+1):''}}
          <el-button size="small" type="primary" @click="beforeUpload">点击上传</el-button>
        </el-form-item>

      </el-form>
    </Dialog>
  </div>
</template>

<script>
  import TableList2 from 'comp/common/TableList2';

  import Dialog from 'comp/common/Dialog.vue';

  export default {
    name: "Doc",
    components: {
      Dialog,
      TableList2
    },
    data() {
      return {
        baseUrl: '',
        fileName: '',
        fileUrl: '',


        fileList: [],
        DocType: [],
        doc: {
          limit: 20,
          page: 1,
          pages: 1,
          totals: 0,
          list: [],
          activeID: '',
          DocTab: {},
          options: {
            archivesCode: '',
            archivesName: '',
            uploaded: ''
          },
          column: []
        },
        dialogCfg: {},
        editData: {
          archivesCode: '',
          archivesName: '',
          catalogNo: '',
          documentNo: '',
          fileNo: '',
          pageSize: '',
          year: '',
          fileUrl: ''
        },
        rules: {
          archivesCode: [
            {required: true, message: '请输入档案编号', trigger: 'change'}
          ],
          archivesName: [
            {required: true, message: '请输入档案标题', trigger: 'change'}
          ],
          catalogNo: [
            {required: true, message: '请输入目录号', trigger: 'change'}
          ],
          documentNo: [
            {required: true, message: '请输入文号', trigger: 'change'}
          ],
          fileNo: [
            {required: true, message: '请输入案卷号', trigger: 'change'}
          ],
          pageSize: [
            {required: true, message: '请输入页量', trigger: 'change'}
          ],
          year: [
            {required: true, message: '请输入年度', trigger: 'change'}
          ],
          fileUrl: [
            {required: true, message: '请上传文件', trigger: 'change'}
          ]
        }
      }
    },
    mounted() {
      this.loadDocList();
    },
    methods: {
      renewDocType(callback) {
        this.DocType = [];
        const _Doc = this.$kkui.cache.get('dict')['Doc'];
        for (let key in _Doc) {
          this.DocType.push({
            label: _Doc[key],
            value: key
          })
        }

        if (typeof callback === 'function') callback();

        this.$kkui.loading_deepBlue.hide();
      },

      getStateName(state) {
        const arr = this.DocType.filter(item => item.value * 1 === state);
        return arr.length === 1 ? arr[0].label : ''
      },
      loadDocList() {
        this.$sysServer.ServerGetDocList({
          page: this.doc.page.toString(),
          limit: this.doc.limit.toString(),
          ...this.doc.options
        }).then(data => {
          this.doc.list = data.records;
          this.doc.total = data.total;
        })

      },
      beforeUpload(file) {
        this.$kkui.submit({
          title: '上传电子档案',
          file: !!1
        }, (file) => {
          this.$sysServer.ServerUpload(file).then(data => {
            this.fileName = data.fileName;
            this.fileUrl = data.fileUrl;
            this.editData.fileUrl = data.fileName;
          })
        });
      },
      removeExceed(file) {
        this.fileList = [];
      },

      addDoc() {
        this.initEditData();
        this.dialogCfg = {
          title: '新增电子档案',
          closeShow: true,
          footerShow: true,
          width: 615,
          height: 440,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {
              if (valid) {
                this.$sysServer.ServerAddDoc({
                  ...this.editData,
                  ...{
                    fileName: this.fileName,
                    fileUrl: this.fileUrl,
                    pageSize: parseInt(this.editData.pageSize * 1)
                  }
                }).then(data => {
                  this.$kkui.msg({
                    icon: '1',
                    cont: '新增成功！'
                  });
                  this.fileName = '';
                  this.fileUrl = '';
                  this.fileList = [];
                  this.initEditData();
                  this.loadDocList();
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },
      editDoc(data) {
        this.editData = {...data};
        this.dialogCfg = {
          title: '编辑电子档案',
          closeShow: true,
          footerShow: true,
          width: 615,
          height: 440,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {
              if (valid) {
                let _data = {};
                if (this.fileUrl) {
                  _data = {
                    ...this.editData,
                    ...{
                      fileName: this.fileName,
                      fileUrl: this.fileUrl
                    }
                  }
                } else {
                  _data = this.editData
                }

                this.$sysServer.ServerEditDoc(_data).then(data => {
                  this.$kkui.msg({
                    icon: '1',
                    cont: '编辑成功！'
                  });
                  this.loadDocList();
                  this.initEditData();
                  typeof callback === 'function' && callback();
                });
              } else {

                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },
      delDoc(id) {
        this.$kkui.alert({
          icon: 0,
          cont: '确定删除此电子档案吗？',
          callback: () => {
            this.$sysServer.ServerDelDoc(id).then(data => {
              this.$kkui.msg({
                cont: '删除成功！'
              });
              this.loadDocList();
            })
          }
        });
      },
      downLoad(url, name) {
        const index = this.$kkui.loading.show();
        const a = document.createElement('a');
        a.href = url;
        a.style.display = 'none';
        a.target = '_blank';
        a.download = name;
        a.click();
        setTimeout(() => {
          this.$kkui.loading.hide(index);
        }, 3000)
        // this.$sysServer.ServerDownloadDoc(name).then(data => {
        //   const a = document.createElement('a');
        //   a.href = data;
        //   a.style.display = 'none';
        //   a.target = '_blank';
        //   a.download = name;
        //   a.click();
        //   setTimeout(() => {
        //     this.$kkui.loading.hide(index);
        //   }, 3000)
        // })


        // const a = document.createElement('a');
        // a.href = WebCfg.api+url;
        // a.style.display = 'none';
        // a.download = name + url.substring(url.lastIndexOf('.') + 1);
        // a.target = '_blank';
        // a.click();
      },
      initEditData() {
        this.editData = {
          archivesCode: '',
          archivesName: '',
          catalogNo: '',
          documentNo: '',
          fileNo: '',
          pageSize: '',
          year: '',
          fileUrl: ''
        }
      },

      changeDocSize(limit) {
        this.doc.limit = limit;
        this.loadDocList();
      },

      changeDocPage(page) {
        this.doc.page = page;
        this.loadDocList();
      },
      resetOption(formName) {
        this.$refs[formName].resetFields();
        this.loadDocList();
      }
    }
  }
</script>

<style scoped>

</style>
